Scrapbox APIで遊ぶ話

遊ぶ話です

※scrapbox user meetupでプレゼンしたもの

だれ？

hashrockといいます

scrapboxユーザ

プログラマー(Vue.js / TypeScript)

作ったもの

maildown

https://gyazo.com/adc74a83250b26ca0b4103f5773ccf24

メモツールの遍歴

紙copi

Nami2000

自作wiki

Simplenote

Trello

wri.pe

scrapbox

趣味

作曲

お絵かき

関連するツールを作ること

https://gyazo.com/7113777850cd01a845c37c80a23569e1

https://gyazo.com/99b8f8e07a9ab981614f55097efd1750

Scrapboxに埋め込んで遊びたい

できるのだろうか…

という話はおいといて本題

scrapboxのAPIで遊ぶ話

API

ページデータを取得するAPI

ページリスト

/api/pages/:projectName

ページ

/api/pages/:projectName/:pageTitle

ページ本文

/api/pages/:projectName/:pageTitle/text

ページタイトル画像

/api/pages/:projectName/:pageTitle/icon

何を作ろうか？

https://gyazo.com/1d91f50b29fcd4bf5255522b8f1ea31d

「散らかってる方が使いやすい」説

部屋を片付けない人の言い訳としてよく登場

筆者もよく言う

場所記憶はすごいらしい

本当か？

検証してみよう

使うAPI

ページ一覧APIを使う

/api/pages/:projectName

ページリストAPI

見れば分かる感じ

https://gyazo.com/3fc93c4d66e2243f0bbf171882b57ebe

ページリストAPI（１件）

https://gyazo.com/9ae09a1f09f6d2931f0342db232a5c7f

作成方針

タイトルが取れるのでd3.jsに突っ込む

取れてきたタイトル１件 ＝図形一つ　に変換して画面に表示

CORS越えるの大変

ローカルにJSONを保存してプロトタイピング

保存

ドラッグ終了時に座標をlocalStorageに保存

code: localstorage.js

function setItemPosition(id, x, y){

}

function saveItems(){

localStorage.sbdrag = JSON.stringify(local)

}

function dragended() {

setItemPosition(d3.event.subject.id, d3.event.subject.x, d3.event.subject.y)

saveItems()

// ...

}

完成

よさそうなところ

いろがいっぱいついてて楽しい

ドラッグ＆ドロップができておもしろい

いいのか悪いのか

散らかった部屋を片付けてる気分を体験

「部屋を片付けていたら、気づいたら漫画読んじゃう」案件が発生

ダメな所

ぐっちゃぐちゃ

Windowsの汚いデスクトップを彷彿とさせる

考えるまでもなく探しづらい

タグとか反映されてない

ページ1000件とかあると破滅

改善案

さらに場所記憶を有効に使おう

北海道に飯情報を置くなど

まとめ

scrapboxのAPIは素直で使いやすい

もっと遊ぼう

scrapboxの一覧がこんな感じじゃなくてよかった

ありがとう、scrapbox